<!--
* description: 索赔-打印
* description: 索赔-打印
* author:wj
* createdDate: 2021-5-19
-->
<template>
  <div class="app-container app-container-table">
    <el-dialog
      v-dialogDrag
      style=""
      :visible="popupsVisible"
      :title="titleName"
      center
      width="900px"
      :append-to-body="true"
      :close-on-click-modal="false"
      @close="closeEdit"
    >
      <dialogHeader
        slot="title"
        :title="titleName"
        :style-type="$store.state.app.dialogType"
      />
      <div>
        <el-button
          type="primary"
          style="float: right; margin-right: 1rem"
          @click="printTest()"
        >打印</el-button>
      </div>

      <div class="out-print-table" id="print">
        <!-- 表单组件 -->
        <div
          v-for="(item, index) in dataForForm"
          id="print-table"
          :key="index"
          class="print-table"
        >
          <div v-for="ite in 2" :key="ite" class="inside-print-table">
            <h2>故障件标签</h2>
            <table border="1px" width="100%" style="padding: 1rem">
              <tr>
                <td>门店编码</td>
                <td>
                  {{ item.dlrCode }}
                </td>
                <td>索赔单号</td>
                <td>
                  {{ item.claimCode }}
                </td>
              </tr>

              <tr>
                <td>备件编码</td>
                <td>
                  {{ item.partCode }}
                </td>
                <td>数量</td>
                <td>
                  {{ item.partQty }}
                </td>
              </tr>

              <tr>
                <td>车系</td>
                <td>
                  {{ item.carSeriesCn }}
                </td>
                <td>页次</td>
                <td>
                  {{ item.indicate }}
                </td>
              </tr>

              <tr>
                <td>生产日期</td>
                <td>
                  {{ item.produceDate }}
                </td>
                <td>行驶里程</td>
                <td>
                  {{ item.mileage }}
                </td>
              </tr>

              <tr>
                <td>故障日期</td>
                <td>
                  {{ item.faultDate }}
                </td>
                <td>销售日期</td>
                <td>
                  {{ item.saleDate }}
                </td>
              </tr>

              <tr>
                <td>备件名称</td>
                <td :colspan="3">
                  {{ item.partName }}
                </td>
              </tr>

              <tr>
                <td>VIN码</td>
                <td :colspan="3">
                  {{ item.vin }}
                </td>
              </tr>

              <tr>
                <td>索赔类别</td>
                <td>
                  {{ item.claimType }}
                </td>
                <td>是否原因件</td>
                <td>
                  {{ item.isReason }}
                </td>
              </tr>

              <tr>
                <td :colspan="2">故障现象</td>
                
                
                <td :colspan="2">
                  {{ item.claimCode }}{{ item.partCode}}{{item.partQty }}
                 
                 
                </td>
              </tr>

              <tr>
                <td :colspan="2">
                  {{ item.csDrsc }}
                </td>
                <td :colspan="2">
                  <div ref="qrcode" :id="`qrcode${index}${ite}`" />
                  <!-- <div ref="`rcode${index}`" id="`qrcode${index}`" /> -->
                </td>
              </tr> 
              <!-- 页次 -->
            </table>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import dialogHeader from '@/components/dialogHeader'
import printJS from 'print-js'
import QRCode from 'qrcodejs2'
import Vue from 'vue'
import { FormItem } from 'element-ui'

export default {
  components: {
    dialogHeader
  },
  // 阻塞路由预加载网格中组件的数据
  beforeRouteEnter(to, from, next) {
    Vue.prototype.$ConfigCache.CacheConfig.initData(
      [to.path, 'supplierMessage-edit'],
      () => {
        next()
      }
    )
  },
  props: {
    popupsVisible: {
      type: Boolean,
      default: false
    },
    dataForForm: {
      type: Array,
      default: () => []
    }
  },
  data() {
    // 页面标识（与上面beforeRouteEnter中的对应）
    const viewPageCode = this.$route.path
    // 绑定事件配置化事件
    this.$ConfigCache.CacheConfig.bindEvent(this, [viewPageCode])
    return {
      item: [],
      // isReason: "",
      titleName: '故障件标签',
      // 动态生成网格列
      formField: { peopleId: '', storeId: '' }
    }
  },
  watch: {
    dataForForm: {
      handler: function(val) {
        if (val) {
          for (let i = 0; i < this.dataForForm.length; i++) {
             for (let j = 1; j <= this.dataForForm.length; j++) {
             const { claimCode, partCode, partQty } = this.dataForForm[i];
             var obj1={ claimCode, partCode, partQty }
             var codeStr=obj1.claimCode+obj1.partCode+obj1.partQty
           
          //    var codeData = `{
          //   "body":
          //     [
          //       {
          //         "claimCode": "${claimCode}",
          //         "partCode":"${partCode}",
          //         "partQty":"${partQty}"
          //       }
          //     ]
          // }
          // `;

            //条码
            this.$nextTick(function () {
              this.$refs.qrcode.innerHTML = "";
              this.qrcode(i,j,140,140, codeStr, "canvas");
            });
          }
          }
         
          // 条码
          // this.$nextTick(function () {
          //   this.$refs.qrcode.innerHTML = ""
          //   this.qrcode(150, 150, codeData, "canvas");
          // });
        }
      }
    }
  },
  methods: {
    // 打印
    printTest() {

      printJS({ printable: "print", type: "html", targetStyles: ["*"],});
    },
    // 条码
    qrcode(i,j,qWidth, qHeight, qText, qRender) {
      let qinedx =`qrcode${i}${j}`
      const qrcode = new QRCode(qinedx, {
        width: qWidth,
        height: qHeight,
        text: qText,
        render: qRender
      })
    },

    closeEdit() {
      this.$emit('closePrint')
    },
    // 保存
    save(res) {}
  }
}
</script>
<style lang="scss" scoped>
.out-print-table {
  width: 100%;
  height: 100%;
  .print-table {
    display: flex;
    justify-content: space-around;
    text-align: center;
    font-size: 12px;
    width: 100%;
    height: 50%;
    .inside-print-table {
      display: inline-block;
      height: 100%;
      width: 46%;
      padding-left: 2%;
      padding-right: 2%;
      margin-bottom: 30px;
    }
  }
}
.el-dialog{
  margin: 15px;
  min-width: 900px !important;
}
tr {
  text-align: center;
}
td {
  height: 15px;
}
</style>